<template>
  <div class="page">
    <!-- 区域1 -->
    <div class="top-section">
      <div class="content">
        <img class="avatar" src="@/assets/xiangmujindu/img_gcs.png" alt="头像" />
        <span class="name">刘志杰</span>
      </div>
      <div class="divider"></div>
    </div>

    <!-- 区域2 -->
    <div class="middle-section">
      <!-- 第一行 -->
      <div class="row" @click="goToPage('my_info')">
        <img class="icon" src="@/assets/xiangmujindu/icon_sz_person.png" alt="个人信息" />
        <span class="text">个人信息</span>
        <img class="arrow" src="@/assets/xiangmujindu/arrow_right.png" alt="箭头" />
      </div>
      <!-- 第二行 -->
      <div class="row" @click="goToPage('setting')">
        <img class="icon" src="@/assets/xiangmujindu/icon_sz_shezhi.png" alt="设置" />
        <span class="text">设置</span>
        <img class="arrow" src="@/assets/xiangmujindu/arrow_right.png" alt="箭头" />
      </div>
    </div>

    <!-- 区域3 -->
    <div class="bottom-section">
      <div class="button" @click="goToPage('index')">
        <img src="@/assets/xiangmujindu/tab_houme_unselected.png" alt="首页" />
        <span>首页</span>
      </div>
      <div class="button">
        <img src="@/assets/xiangmujindu/tab_my_select.png" alt="我的" />
        <span>我的</span>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  methods: {
    // 导航到指定页面
    navigate(page) {
      alert(`跳转到 ${page}`);
    },
    // 跳转到首页或我的页面
    goToPage(page) {
      this.$router.push({ name: page })
      // if (page === "index") {
      //   this.$router.push("/index"); // 确保路由已配置
      // } else if (page === "my") {
      //   this.$router.push("/my"); // 确保路由已配置
      // }
    },
  },
};
</script>


<style scoped>
/* 页面样式 */
.page {
  width: 100%;
  height: 100%;
  font-size: 13px;
  overflow: hidden;
  /* background-color: #ffffff; */
  /* position: relative; */
  /* min-height: 100vh; */
}

/* 区域1 */
.top-section {
  background-image: url("../assets/xiangmujindu/bg_grzx@3x.png");
  height: 227px;
  background-size: 100%;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  padding-left: 20px;
}
.content {
  margin-top:10%;
  display: flex;
  align-items: center;
}
.avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  margin-right: 10px;
}
.name {
  font-size: 16px;
  color: #333333;
  font-weight: bold;
}
.divider {
  width: 100%;
  height: 1px;
  background-color: #ECEFF5;
  position: absolute;
  bottom: 0;
}

/* 区域2 */
.middle-section {
  margin: 20px 0;
}
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  /* background-color: #ffffff; */
  margin-bottom: 10px;
  border-radius: 5px;
  cursor: pointer;
}
.icon {
  width: 17px;
  height: 17px;
}
.text {
  flex: 1;
  margin-left: 10px;
  color: #333333;
  font-size: 14px;
}
.arrow {
  width: 15px;
  height: 15px;
}

/* 区域3 */
.bottom-section {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #ffffff;
  display: flex;
  z-index: 1000;
  border-top: 1px solid #e0e0e0;
}
.button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.button img {
  width: 30px;
  height: 30px;
  margin-bottom: 5px;
}
.button span {
  font-size: 13px;
  color: #333333;
}
</style>
